<template>
    <!--监测点统计-->
    <div class="statistics_monitoring_point">
        <div class="header">
            <p>监测点位数：<span>100</span>个</p>
        </div>
        <div class="statistics_monitoring_point_echarts">
            <CommonTitleComponent text="监测点位各分类数量"></CommonTitleComponent>
            <div class="echarts">
                <chart-view
                    :chart-option="EchartsMethods.monitoringPoints()"
                    :auto-resize="true"
                    height="100%"
                    style="height: 100%"
                ></chart-view>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import {EchartsMethods} from "@/chart/index";
</script>
<style scoped lang="scss">
.statistics_monitoring_point {
    height: 90%;
    .header {
        display: flex;
        justify-content: center;
        p{
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #FFFFFF;
            span{
                @include pmzd();
                font-size: 16px;
                margin-right: 2px;
            }
        }
    }
    &_echarts{
        height: 90%;
        padding-top: 10px;
        .echarts{
            height: 90%;
        }
    }
}
</style>